<template>
	<view>
		<picker :mode="mode" @change="pickerChange" :value="selectValue" 
			:range="dataList" :range-key="text" :start="start" :end="end" :fields="fields" :custom-item="customItem">
			<view class="select-picker">
				<text class="placeholder" :class="selectValue == ''?'default':''">{{selectText}}</text>
				<view class="select-picker-arrow-area">
					<view class="select-picker-arrow"></view>
				</view>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		name:"hpy-form-select",
		props:{
			title:{
				type: String,
				default:'请选择'
			},
			// selector 或 multiSelector
			mode:{
				type: String,
				default: 'selector'
			},
			// 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
			start:{
				type: String,
				default: ''
			},
			// 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
			end:{
				type: String,
				default: ''
			},
			// 有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI
			fields:{
				type: String,
				default: 'day'
			},
			// 可为每一列的顶部添加一个自定义的项
			customItem:{
				type: String,
				default: ''
			},
			// 下拉选择的数据
			dataList:{
				type:Array,
				default:function(){
					return []
				}
			},
			// 指定显示值的key
			text:{
				type:String,
				default: ''
			},
			// 实际值的key
			name:{
				type:String,
				default: 'value'
			},
			// 保存值
			value:{
				type:String,
				default: ''
			}
		},
		model:{
			prop:'value',
			event:'pickerChange'
		},
		data() {
			return {
				selectValue:''
			};
		},
		created() {
			this.initSelected(this.value);
		},
		watch:{
			value(val){
				this.initSelected(val);
			}
		},
		computed:{
			selectText(){
				if(this.selectValue == ''){
					return this.title;
				}
				if('date' == this.mode || 'time' == this.mode){
					return this.selectValue;
				}else{
					return this.dataList[this.selectValue][this.text];
				}
			}
		},
		methods:{
			// 初始化选择
			initSelected(value){
				if('date' == this.mode || 'time' == this.mode){
					this.selectValue = value;
				}else{
					if(value && this.dataList.length > 0){
						this.dataList.some((item, index) => {
							if(item[this.name] == value){
								this.selectValue = index;
								return true;
							}
						});
					}
				}
			},
			// 选择
			pickerChange(e){
				const val = e.detail.value;
				this.selectValue = val;
				if('date' == this.mode || 'time' == this.mode){
					this.$emit('input', val);
					this.$emit('change', val);
				}else{
					let data = this.dataList[this.selectValue];
					this.$emit('input', data[this.name]);
					this.$emit('change', {'index':val, 'value':data});
				}
			}
		}
	}
</script>

<style scoped>
	.select-picker {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;align-items: center;flex-wrap: nowrap;font-size: 14px;line-height: 38px;padding: 0 5px;overflow: hidden;/* #ifdef APP-NVUE */height: 40px;/* #endif */border: 1px solid #e5e5e5;border-radius: 5px;text-indent:4px;}
	.select-picker-arrow-area {position: relative;width: 20px;/* #ifndef APP-NVUE */margin-left: auto;display: flex;/* #endif */justify-content: center;transform: rotate(-45deg);transform-origin: center;}
	.select-picker-arrow{width:7px;height:7px;border-left:1px solid #999;border-bottom:1px solid #999}
	.placeholder.default{color: grey;text-indent: 0px;}
</style>
